<template>
    <view class="goods-list-row">
        <view class="goods-list">
            <view class="goods" v-for="(item, index) in goodsList" :key="index">
                <view class="row" @click="eventClick(item,$event)">
                    <view class="goods-img-box">
                        <lazy-image class="lazy-image" :realSrc="item.pict_url"></lazy-image>
                    </view>
                    <view class="goods-info">
                        <view class="goods-title">
                            <text>{{ item.title }}</text>
                        </view>
                        <view class="coupen-row">
                            <view class="coupen-price">
                                <text>{{ parseInt(item.coupon_amount) }}元券</text>
                            </view>
                            <view class="to-seller-detail" @click="eventPlatform(item.url,$event)">
                                搜
                                <img :src="platformLogoList[platformList.indexOf(item.seller)]"/>
                                ￥{{ item.zk_final_price }}
                            </view>
                        </view>
                        <view class="goods-price">
                            <view class="price-hou">
                                <text class="price-hou-text">到手</text>
                                <text class="price-hou-money">￥{{ item.zf_price }}</text>
                            </view>
                            <view class="quick-buy">
                                <text class="quick-buy-text">立即{{typeText||'抢购'}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="loading-text">{{ loadingText }}</view>
    </view>
</template>

<script>
    import jd from '../static/img/logo/LOGO-JD.png';
    import pdd from '../static/img/logo/LOGO-PDD.png';
    import sq from '../static/img/logo/LOGO-SQ.png';
    import tm from '../static/img/logo/LOGO-TM.png';
    import tb from '../static/img/logo/LOGO-TB.png';

    const platformList = ['京东', '淘宝', '拼多多', '天猫', '自营'];
    const platformLogoList = [jd, tb, pdd, tm, sq];
    export default {
        name: 'goods-list',
        props: {
            loadingText: {
                type: String,
                default:'没有更多了'
            },
            goodsList: Array,
            tm: true,
            typeText: ''
        },
        data() {
            return {
                platformList,
                platformLogoList
            }
        },
        methods: {
            eventClick(item) {
                const seller = item.seller;
                const tm = item.tm;
                let a = '';
                //     0:'自营',
                //     1:'京东',
                //     3:'淘宝',
                //     4:'天猫',
                //     11:'拼多多'
                switch (item.deduction) {
                    case '3':
                    case '4':
                        a = 'tb';
                        break;
                    case '0':
                        a = 'self';
                        break;
                    case '1':
                    case '11':
                    default:
                        a = 'tb';
                        break;
                }
                let url = `/pages/${a}detail/${a}detail?skuId=${item.skuId}&cid=${item.cid}&title=${item.title}&seller=${a ? seller : item.deduction}&coupon_amount=${item.coupon_amount}&startTime=${item.startTime}&endTime=${item.endTime}&tm=${tm}&disable_order_direct_discount=1&fromapp=1&bump=${decodeURIComponent(UrlParam().bump)}`;

                h5NavigateTo({url});
            },
            eventPlatform(url, e) {
                e = window.event || e;
                e.stopPropagation();
                appNavigateTo(url)
            }
        }
    };
</script>

<style lang="scss">
    .goods-list-row {
        display: flex;
        justify-content: flex-start;
        align-content: space-around;
        flex-wrap: wrap;
        overflow: hidden;

        .loading-text {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
            line-height: 60px;
            color: #979797;
            font-size: 24px;
            padding-bottom: 80px;
        }

        .goods-list {
            padding: 0 24px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            .goods {
                width: 100%;
                border-radius: 10px;
                background-color: #fff;
                margin: 8px 0;
                z-index: 2;

                .row {
                    padding: 30px 16px;
                    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
                    display: flex;

                    .goods-img-box {
                        width: 240px;
                        height: 240px;

                        image {
                            border-radius: 10px;
                            width: 100%;
                            height: 370px;
                        }

                        image:after {
                            content: '';
                            height: 100%;
                            width: 100%;
                            background: url('../static/img/ios/slougen.png') no-repeat center;
                            background-size: 100% 100%;
                            border-radius: 20px;
                        }

                        .goods-img-title {
                            width: 100%;
                            height: 0px;
                            display: flex;
                            justify-content: center;

                            image {
                                width: 70%;
                                height: 0px;
                                z-index: 1;
                            }
                        }

                        .goods-img-di {
                            height: 0px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            text {
                                height: 0px;
                                color: white;
                                font-size: 24px;
                                font-weight: 600;
                                z-index: 2;
                            }
                        }
                    }

                    .goods-info {
                        flex: 1;
                        padding-left: 16px;

                        .goods-title {
                            height: 84px;

                            text {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                text-align: justify;
                                overflow: hidden;
                                font-size: 28px;
                                line-height: 1.5;
                                color: #000;
                            }

                            margin-bottom: 32px;
                        }

                        .coupen-row {
                            width: 100%;
                            margin-bottom: 28px;
                            display: flex;
                            align-items: center;

                            .coupen-price {
                                height: 32px;
                                padding: 0 10px;
                                background-image: url('../static/img/sy/bianqian-hong.png');
                                background-repeat: no-repeat;
                                background-position: 0px 0px;
                                background-size: 100% 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 18px;
                                font-family: PingFang-SC-Medium;
                                font-weight: 500;
                                color: rgba(255, 255, 255, 1);
                                line-height: 18px;
                            }

                            .to-seller-detail {
                                margin-left: 10px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-wrap: wrap;
                                color: gray;
                                font-size: 24px;
                                /* text-decoration: underline; */
                                z-index: 666;
                                letter-spacing: 1Px;

                                img {
                                    width: 24px;
                                    height: 24px;
                                    margin-left: 4px;
                                    margin-right: 4px;
                                }
                            }
                        }

                        .goods-price {
                            width: 92%;
                            padding: 0px 10px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .price-yuan {
                                .pre-cost {
                                    font-size: 24px;
                                    margin-left: 6px;
                                    color: gray;
                                }
                            }

                            .price-hou {
                                .price-hou-text {
                                    color: rgba(254, 42, 60, 1);
                                    font-size: 24px;
                                }

                                .price-hou-money {
                                    font-weight: 600;
                                    color: rgba(254, 42, 60, 1);
                                    font-size: 30px;
                                }
                            }

                            .quick-buy {
                                border: 1Px solid #FF4964;
                                border-radius: 10px;
                                width: 150px;
                                height: 60px;
                                text-align: center;

                                .quick-buy-text {
                                    color: #FF4964;
                                    line-height: 60px;
                                    font-size: 28px;
                                }
                            }
                        }
                    }

                }
            }
        }
    }
</style>
